import React, { Suspense } from "react";
import PageLoading from "@/components/PageLoading";
import PageHeaderWrapper from "@/components/PageHeaderWrapper";
import { Button, Card, Col, Input, message, Row, Table, Modal } from "antd";
import { connect } from "dva";
import TradeAdd from "@/pages/TenantManagement/tradeAdd";
import moment from "moment";

const { Search } = Input;
const { confirm } = Modal;

class TradeList extends React.Component {
	constructor(props) {
		super(props);
		this.state = {
			dataSource: [],
			query: {
				search: "",
				current: 1,
				size: 10,
			},
			total: 3,
			loading: false,
			title: "添加租户",
		};
	}

	componentDidMount() {
		this.getList();
	}

	getList = () => {
		const { dispatch } = this.props;
		const { query } = this.state;
		this.setState({ loading: true }, () => {
			dispatch({
				type: "tenantManagement/getTenantList",
				payload: query,
				callback: (res) => {
					this.setState({
						dataSource: res.records,
						total: res.total,
						loading: false,
					});
				},
			});
		});
	};

	queryByPage = (page, limit) => {
		let { query } = this.state;
		query.current = page;
		query.size = limit;
		this.setState({ query }, () => this.getList());
	};

	queryBySearch = (value) => {
		let { query } = this.state;
		query.search = value;
		query.current = 1;
		this.setState({ query }, () => this.getList());
	};

	openAddModal = (row) => {
		this.setState({ title: row ? "编辑企业账号" : "添加企业账号" }, () => {
			this.TradeAdd.initData(row);
		});
	};

	removeRecord = (row) => {
		const that = this;
		confirm({
			title: "确定要删除吗?",
			okText: "确定",
			okType: "danger",
			cancelText: "取消",
			onOk() {
				const { dispatch } = that.props;
				let { query } = that.state;
				dispatch({
					type: "tenantManagement/removeList",
					payload: { id: row.id },
					callback: (res) => {
						message.info(res.message);
						query.current = 1;
						that.setState({ query }, () => that.getList());
					},
				});
			},
			onCancel() { },
		});
	};

	resetPassword = (row) => {
		const { dispatch } = this.props;
		const that = this;
		Modal.confirm({
			title: "确定重置密码吗？",
			okText: "确定",
			cancelText: "取消",
			okType: "danger",
			onOk: () => {
				dispatch({
					type: "tenantManagement/toResetPassword",
					payload: { id: row.userId },
					callback: (res) => {
						message.info(res.message);
						that.getList();
					},
				});
			},
		});
	};

	changeTenantByClick = async (row) => {
		const { dispatch } = this.props;
		dispatch({
			type: "login/changeTenantByClick",
			payload: { tenantId: row.id },
		});
	};

	render() {
		const { dataSource, total, query, loading, title } = this.state;
		const columns = [
			{
				title: "企业名称",
				dataIndex: "tradeName",
				key: "tradeName",
			},
			{
				title: "租户管理员数量",
				dataIndex: "count",
				key: "count",
			},
			{
				title: "创建类型",
				dataIndex: "type",
				key: "type",
			},
			{
				title: "创建时间",
				dataIndex: "createTime",
				key: "createTime",
				render: text => {
					if (text) {
						return moment(text).format("YYYY-MM-DD HH:mm:ss");
					} else {
						return "";
					}
				},
			},
			{
				title: "审查结果",
				dataIndex: "reviewResults",
				key: "reviewResults",
			},
			{
				title: "有效期",
				dataIndex: "validity",
				key: "validity",
			},
			{
				title: "操作",
				render: (_, row) => {
					return <span>
						<Button type="primary" onClick={() => this.openAddModal(row)}>编辑</Button>
						<Button type="danger" style={{ marginLeft: 10 }}>停用</Button>
						<Button type="primary" style={{ marginLeft: 10 }} onClick={() => this.changeTenantByClick(row)}>进入系统</Button>
					</span>
				}
			},
		];

		return (
			<Suspense fallback={<PageLoading />}>
				<PageHeaderWrapper>
					<Card bordered={false}>
						<Row>
							<Col span={12}>
								<Search
									placeholder={"请输入租户名或账号"}
									style={{ width: 250 }}
									onSearch={this.queryBySearch}
								/>
							</Col>
							<Col span={12} style={{ textAlign: "right" }}>
								<Button type="primary" onClick={this.openAddModal}> 新增 </Button>
							</Col>
						</Row>
						<Row style={{ margin: "20px 0" }}>
							<Col span={24}>
								<Table
									loading={loading}
									dataSource={dataSource}
									columns={columns}
									rowKey={"id"}
									pagination={{
										total: total,
										current: query.current,
										onChange: this.queryByPage,
										showSizeChanger: true,
										showQuickJumper: true,
										onShowSizeChange: this.queryByPage,
									}}
								/>
							</Col>
						</Row>
					</Card>
					<TradeAdd
						title={title}
						onRef={(ref) => (this.TradeAdd = ref)}
						getList={this.getList}
					/>
				</PageHeaderWrapper>
			</Suspense>
		);
	}
}

export default connect(({ user }) => ({
	currentUser: user.currentUser,
}))(TradeList);
